<template>
  <div>
    <!--<div style="width: 100%;height: 136vw;overflow: hidden">-->
      <div class="imgBox">
        <div class="holeBox" style="float:left;"   v-for="(v,i) in commendList" :key="i" v-if="i<=3">
          <router-link to="club">
            <img :src="v.image.img_url" alt="">
            <p>{{v.article_title}}</p>
            <div style="color: #333;font-size: 10px;">
              <img :src="v.head_ico"  alt="" style="border-radius:50%;width:6.67vw;height: 6.67vw;float: left;margin-left: 2vw;margin-bottom: 2vw;">
              <span style="float: left;line-height: 6.8vw;margin-left: 1vw;font-size: 10px;">{{v.user_name}}</span>
              <span style="float: right;margin-top: 0vw;margin-right: 2vw">
                <van-icon name="like-o" size="3.5vw" style="margin-top: 1vw;position: relative;top: 1vw;"/>
                <span style="position:relative;top: 1px;">{{v.thumbs_num}}</span>
              </span>
            </div>
          </router-link>
        </div>
      </div>
    <!--</div>-->

    <div class="clear"></div>
  </div>
</template>

<script>
  export default {
    name: "homeGoodsCommend",
    /*props:['category_id'],*/
    data(){
      return{
        commendList:[]
      }
    },
    created(){
      var that=this;
      this.$http({

        url:'super/api/home/getActicle',
        method:'post',
        data:{
          category_id:-1,
          page:this._globe.page,
          time:this._globe.time1,
          device_id:this._globe.device_id,
          version:this._globe.version,
          platform:this._globe.platform,
          token:this._globe.token1,
        }
      })
        .then(function (response) {
          const resData=response.data;
          if(resData.code==1){
            that.commendList=resData.data.list;
            console.log(that.commendList);
          }
        })
        .catch(function (response) {
          console.log(response);
        })

    },
  }
</script>

<style scoped lang="scss">
  .imgBox{
    width: 96vw;
    column-count: 2;
    column-gap: 0;
    margin: 0px auto;
    .holeBox{
      break-inside: avoid;
      width: 42.67vw;
      display: inline-block;
      background: #fff;
      box-shadow: 0px 0 5px 2px #f5f5f5;
      border-radius:2vw;
      overflow: hidden;
      margin:2.5vw;
      float: left;
      img{
        width: 42.67vw;
        height:42.67vw;
        display: inline-block;
      }
      p{
        font-size: 15px;
        color: #333;
        text-align: left;
        margin-left:2vw;
        margin-bottom: 2vw;
      }
    }
  }
  @media screen and(max-width: 375px)and (min-width: 320px){
    p{
      font-size: 13px !important;
    }
  }
</style>
